<template>
  <view class="Lifo">
    <view class="lists">
      <view class="li" v-for="(item, index) in itemList" :key="index">
        <image class="lef" :src="'https://www.123qifu.com/' + item.image" mode="aspectFit" />
        <view class="rig">
          <view class="top">
            <h2>{{ item.title }}</h2>
            <p>
              {{ item.content }}
            </p>
          </view>
          <view class="bot">
            <view class="leff">
              <image class="iconc" src="https://www.123qifu.com/onlineimages/static/canyIcon.png" mode="" />{{
                item.blessing_num
              }}人参与
            </view>
            <view class="rigg">
              <span class="jj" @click="understand(item)">简介</span>
              <!-- <span class="lf" @click="bodhiClcik(item.id)">礼佛</span> -->
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 简介弹出层 -->
    <uni-popup ref="popup" type="center">
      <view class="brief">
        <image
          src="https://www.123qifu.com/onlineimages/static/pray/cha.png"
          class="closImg"
          @click="closClick()"
        ></image>
        <view class="brief_title" v-html="detailsList.title"></view>
        <scroll-view
          scroll-top="0"
          scroll-y="true"
          class="scroll-Y"
          style="height: 715rpx"
        >
          <view class="briefImg">
            <image
              class="img"
              :src="url + detailsList.image"
              mode="aspectFit"
            ></image>
          </view>
          <view class="brief_conten">
            <view v-html="detailsList.content"></view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      itemList: [],
      detailsList: "",
      url: "",
    };
  },
  onLoad() {
    this.url = this.$IMG_URL;
    this.prayListClick();
  },
  methods: {
    gobackClick() {
      uni.switchTab({
        url: "../index/index",
      });
    },
    //礼佛祈福列表
    async prayListClick() {
      let that = this;
      const res = await that.$myRequest({
        url: "user/lflist",
        method: "GET",
      });
      that.itemList = res.data.data;
    },
    //礼佛首页
    async bodhiClcik(id) {
      uni.navigateTo({
        url: "../Bodhisattva/newWish?Wishid=" + id,
      });
      // 礼佛浏览数加一
      let that = this;
      const res = await that.$myRequest({
        url: "user/add_lf_read",
        method: "GET",
        data: {
          id: id,
        },
      });
    },
    // 查看简介
    understand(item) {
      this.$refs.popup.open();
      this.detailsList = item;
    },
    closClick() {
      this.$refs.popup.close();
    },
  },
};
</script>

<style lang="scss">
page {
  width: 750rpx;
  background-color: #f4f4f4;
}
.Lifo {
  .lists {
    min-height: calc(100vh);
    margin-top: 20rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 0 27rpx 0 29rpx;
    .li {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 28rpx 0;
      border-bottom: 1rpx solid #eee;
      .lef {
        display: block;
        width: 180rpx;
        height: 200rpx;
        margin-right: 18rpx;
      }
      .rig {
        flex: 1;
        height: 200rpx;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        .top {
          h2 {
            font-size: 30rpx;
            font-weight: 500;
            color: #373737;
          }
          p {
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            margin-top: 20rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-align: justify;
          }
        }
        .bot {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          .leff {
            display: flex;
            align-items: center;
            font-size: 20rpx;
            font-weight: 400;
            color: #999999;
            .iconc {
              display: block;
              width: 18rpx;
              height: 18rpx;
              margin-right: 10rpx;
            }
          }
          .rigg {
            display: flex;
            align-items: center;
            .jj {
              width: 114rpx;
              height: 50rpx;
              border: 1rpx solid #c52b2e;
              border-radius: 25rpx;
              text-align: center;
              line-height: 50rpx;
              font-size: 30rpx;
              font-weight: 400;
              color: #c52b2e;
            }
            .lf {
              width: 114rpx;
              height: 50rpx;
              background: #c52b2e;
              border-radius: 25rpx;
              text-align: center;
              line-height: 50rpx;
              font-size: 30rpx;
              font-size: 30rpx;
              font-weight: 400;
              color: #ffffff;
              margin-left: 20rpx;
            }
          }
        }
      }
    }
    .li:last-child {
      border-bottom: none;
    }
  }
  .brief {
    width: 690rpx;
    height: 860rpx;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10rpx;

    .closImg {
      position: absolute;
      right: 30rpx;
      top: 30rpx;
      width: 32rpx;
      height: 32rpx;
      margin: 0 0 30rpx;
    }

    .brief_title {
      display: flex;
      justify-content: center;
      color: #333333;
      font-weight: 600;
      font-size: 35rpx;
      border-bottom: 1rpx solid #eee;
      box-sizing: border-box;
      padding: 20rpx 0;
    }

    .briefImg {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90%;
      margin: 5rpx auto;
      border-radius: 5rpx;
      padding: 10rpx;
      .img {
        max-width: 65%;
        max-height: 100%;
      }
    }

    .brief_conten {
      display: flex;
      flex-direction: column;
      width: 90%;
      margin: 0 auto;
      padding: 10rpx 0;
      color: #555;
      font-size: 28rpx;
      line-height: 45rpx;
      text-indent: 2em;
      text-align: justify;
    }
  }
}
</style>
